<template>
  <div id="app">
    <h4>----------App内容----------</h4>
    <h4>{{ message }}</h4>
    <h4>{{ $store.state.counter }}</h4>
    <!-- <button @click="counter++">+</button>
    <button @click="counter--">-</button> -->

    <!-- 修改vuex里的状态counter    但
          是不建议用此方式修改 
          需要使用
    -->
    <!-- <button @click="$store.state.counter++">+</button>
    <button @click="$store.state.counter--">-</button> -->

    <h4>----------mutations----------</h4>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <!-- 需求：+5 ，+10  -->
    <!-- <button @click="addFive">+5</button> -->
    <!-- <button @click="addTen">+10</button> -->
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>

    <!-- 父组件传递子组件方式 -->
    <!-- <hello-vuex :counter="counter"></hello-vuex> -->

    <h4>----------getters相关信息----------</h4>
    <h4>获取counter的平方</h4>
    <h4>{{ $store.state.counter * $store.state.counter }}</h4>
    <!-- getters处理 -->
    <h4>{{ $store.getters.powerCounter }}</h4>

    <h4>----------获取年龄超过20岁的学生----------</h4>
    <h4>{{ more20 }}</h4>
    <h4>{{ $store.getters.more20student }}</h4>

    <h4>----------获取年龄超过20岁的学生的个数----------</h4>
    <h4>{{ $store.getters.more20student.length }}</h4>
    <!-- 传递getters参数 -->
    <h4>{{ $store.getters.more20LengthTwo }}</h4>

    <h4>----------获取年龄超过**岁的学生----------</h4>
    <h4>{{ $store.getters.moreAge(17) }}</h4>
    <h4>{{ $store.getters.moreAge(60) }}</h4>

    <h4>----------App内容：info对象的内容是否是响应式----------</h4>
    <h4>{{ $store.state.info }}</h4>
    <button @click="updateInfo">修改名字</button>


    <h4>----------App内容：modules的内容----------</h4>
    <h4>{{$store.state.a.name}}</h4>
    <h4>{{$store.getters.fullname}}</h4>
    <h4>{{$store.getters.fullname2}}</h4>
    <h4>{{$store.getters.fullname3}}</h4>
    <button @click="updateName">修改名字</button>
    <button @click="aUpdateName">异步修改名字</button>

  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";
import { INCREMENT } from "./store/mutations-types";

export default {
  name: "App",
  components: {
    HelloVuex,
  },
  data() {
    return {
      message: "hello Vuex：我是APP组件",
      // counter: 0
    };
  },
  methods: {
    addition() {
      this.$store.commit(INCREMENT);
    },
    subtraction() {
      this.$store.commit("decrement");
    },
    addCount(count) {
      // 普通提交风格
      this.$store.commit("addCount", count);

      // 特殊提交封装
      // 此方式传递count为一个对象  {type: "addCount", count: 5}
      // 此时count 最好取名为payload
      // this.$store.commit({
      //   type: 'addCount',
      //   count: count
      // })
    },
    addStudent() {
      const student = { id: 6, name: "七七", age: 22 };
      this.$store.commit("addStudent", student);
    },
    updateInfo() {
      //this.$store.commit('updateInfo')   // 提交到mutation
      // 提交到action
      // this.$store.dispatch('aUpdateInfo','我是peyload')
      // 修改完成后返回通知  payload为一个对象，存放要传递的参数，和回调函数
      // this.$store.dispatch('aUpdateInfo', {
      //   message: '我携带的参数信息',
      //   success:() => {
      //     console.log('完成修改')
      //   }
      // })

      // 更优雅的写法
      this.$store.dispatch('aUpdateInfo', '我携带的参数信息').then(res => {
        console.log('完成修改')
        console.log(res)
      })
      // dispatch可以拿到 并且继续使用action返回的promise  接着写then

    },

    updateName() {
      this.$store.commit('updateName', '糖宝')
    },

    // 异步修改名字
    aUpdateName() {
      this.$store.dispatch('aUpdateName')
    }
  },
  computed: {
    // 获取年龄超过20岁的学生
    more20() {
      // return this.$store.state.students.filter(s => {
      //   return s.age >= 20
      // })
      // 简写
      return this.$store.state.students.filter((s) => s.age >= 20);
    },
  },
};
</script>

<style>
</style>
